<template>
	<div class="container">
		<div v-loading="loading" element-loading-spinner="el-icon-loading">
			<el-table
				size="mini"
				class="small-size-table"
				border
				:data="tableData"
				style="width: 100%"
				:header-cell-style="getRowClass"
				highlight-current-row
				header-align="center"
			>
				<el-table-column
					:label="`${$t('dxn.card_ables_list.table_id')}`"
					min-width="195"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.tableCode || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					:label="`${$t('dxn.card_ables_list.table_state')}`"
					min-width="80"
					align="center"
				>
					<template slot-scope="scope">
						{{ getTypeName(scope.row.status, cardTableStatusArr) }}
					</template>
				</el-table-column>
				<el-table-column
					label="创建者"
					min-width="100"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.createdBy || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					:label="`牌桌创建时间`"
					min-width="100"
					align="center"
				>
					<template slot-scope="scope">
						{{ parseTime(scope.row.createdAt) || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					:label="`${$t('dxn.card_ables_list.table_name')}`"
					min-width="100"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.tableName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					:label="`${$t('dxn.card_ables_list.game_name')}`"
					min-width="100"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ typeFilter(scope.row.tableType, 'gameType') }}
					</template>
				</el-table-column>
				<el-table-column
					label="特殊玩法"
					min-width="120"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							getTypeName(
								scope.row.specialPlayType,
								specialPlayTypeArr
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					label="保险模式"
					min-width="120"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							getTypeName(
								scope.row.insuranceMode,
								insuranceModeArr
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					:label="`${$t('dxn.card_ables_list.club_id')}`"
					min-width="100"
					align="center"
				>
					<template slot-scope="scope">
						<div
							v-if="
								!!scope.row.clubId ||
									scope.row.clubId + '' === '0'
							"
							class="blueColor decoration"
							@click="
								handleJump({
									path: '/dxn/clubManager/clubList',
									query: {
										clubId: scope.row.clubId
									}
								})
							"
						>
							{{ scope.row.clubId }}
						</div>
						<div v-else>-</div>
					</template>
				</el-table-column>
				<el-table-column
					:label="`牌桌开始时间`"
					min-width="100"
					align="center"
				>
					<template slot-scope="scope">
						{{ parseTime(scope.row.tableBeginTime) || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					:label="`牌桌结束时间`"
					min-width="100"
					align="center"
				>
					<template slot-scope="scope">
						{{ parseTime(scope.row.tableEndTime) || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					:label="`${$t('dxn.card_ables_list.blind_injection')}`"
					min-width="120"
					align="center"
				>
					<template slot-scope="scope">
						<ShowBlindInjection
							:tableType="scope.row.tableType"
							:bbBlindScore="scope.row.bbBlindScore"
							:sbBlindScore="scope.row.sbBlindScore"
							:anteSwitch="scope.row.anteSwitch"
							:anteScore="scope.row.anteScore"
							:straddleAmount="scope.row.straddleAmount"
						/>
					</template>
				</el-table-column>
				<el-table-column min-width="100" align="center">
					<template slot="header">
						<div>手牌服务费</div>
						<div class="header-top-line">收取方式</div>
					</template>
					<template slot-scope="scope">
						{{
							getTypeName(
								scope.row.serviceChargeType,
								serviceChargeTypeArr
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					:label="`${$t('dxn.card_ables_list.num_cards_hand')}`"
					min-width="100"
					align="center"
				>
					<template slot-scope="scope">
						{{ scope.row.handCount + '' || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					:label="`${$t('dxn.card_ables_list.accum_part')}`"
					min-width="100"
					align="center"
				>
					<template slot-scope="scope">
						{{ scope.row.participantTotal || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					:label="`${$t('dxn.game_rule.only_direct_member_switch')}`"
					min-width="120"
					align="center"
				>
					<template slot-scope="scope">
						{{
							scope.row.onlyDirectMemberSwitch === 1
								? scope.row.onlyDirectMember === 1
									? '开启'
									: '关闭'
								: '功能未开放'
						}}
					</template>
				</el-table-column>
			</el-table>
			<div class="revenue">
				<span class="title">
					{{ $t('dxn.card_ables_list.game_revenue') }}
				</span>
				<el-divider></el-divider>
				<GameTable :tableData="tableData" />
			</div>
		</div>
		<div class="revenue">
			<span class="title">
				{{ $t('dxn.card_ables_list.perm_info') }}
			</span>
			<el-divider></el-divider>
			<PermInfoTable
				:gameTypeId="gameTypeId"
				:detailTableId="detailTableId"
				:queryData="queryData"
				:tableData="tableData"
				@dissolve="handleDissolve"
				@updateRobotNum="updateRobotNum"
			/>
		</div>
	</div>
</template>

<script>
import list from '@/mixins/list'
import GameTable from '../GameTable'
import PermInfoTable from '../PermInfoTable'
import {
	serviceChargeTypeArr,
	specialPlayTypeArr,
	cardTableStatusArr,
	insuranceModeArr
} from '@/dict/dxn'
import ShowBlindInjection from '@/components/Dxn/ShowBlindInjection'
export default {
	components: {
		GameTable,
		PermInfoTable,
		ShowBlindInjection
	},
	mixins: [list],

	props: {
		queryData: {
			type: Object,
			default: () => {}
		},
		disabledSearch: {
			type: Boolean,
			default: false
		},
		activeIdx: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			tableData: [],
			gameTypeId: null,
			detailTableId: undefined,
			serviceChargeTypeArr,
			specialPlayTypeArr,
			cardTableStatusArr,
			insuranceModeArr
		}
	},
	methods: {
		loadData() {
			if (this.queryData.id && Number(this.activeIdx) === 0) {
				this.tableData = []
				this.gameTypeId = undefined
				this.detailTableId = undefined
				const params = {
					...this.queryData
				}
				this.loading = true
				this.$emit('changeDisabledSearch', true)
				this.$api
					.getDxtableBaseDetailBend(params)
					.then((res) => {
						if (res?.code === 200) {
							const len = Object.keys(res.data).length
							this.tableData = len ? [res.data] : []
							this.gameTypeId = res.data.gameTypeId
							this.detailTableId = res.data.tableId
							// this.total = len ? this.list.length : 0
						}
					})
					.catch(() => {})
					.finally(() => {
						this.loading = false
						this.$emit('changeDisabledSearch', false)
					})
			}
		},
		// 跳转
		handleJump(obj) {
			this.$router.push(obj)
		},
		// 解散成功
		handleDissolve() {
			this.loadData()
		},
		// 更新机器人数量
		updateRobotNum() {
			this.loadData()
		}
	}
}
</script>

<style lang="scss" scoped>
.decoration {
	text-decoration: underline;
	cursor: pointer;
}
.revenue {
	margin-top: 15px;
}
.header-top-line {
	margin-top: -8px;
}
</style>
